
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>海城商城</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>
    	window.onload=function(){
    		var mian = $(".mui-bar-nav").width();
			var dinwei = $(".dinwei").width();
			var gouwuche = $(".gouwuche").width()+32;
			$(".top_sousuo").width(mian-dinwei-gouwuche);
			$(".mui-scroll-wrapper.mui-slider-indicator").height($(".img_kuang").height()+20)
    	}
    </script>
</head>
<body>
	<!--顶部内容-->
	<header class="mui-bar mui-bar-nav">
		<span class="dinwei">
			<i class="iconfont icon-dingwei"></i>
			珠海
		</span>
	    <div class="mui-input-row mui-search top_sousuo">
	        <input id="sou" type="search" class="mui-input-clear" placeholder="机油/品牌">
	    </div>
	    <span class="gouwuche">
	    	<i class="iconfont icon-gouwuche"></i>
	    </span>
	</header>
	
	<!--底部导航栏-->
	<nav id="nav" class="mui-bar mui-bar-tab">
	    <a href="" class="mui-tab-item mui-active">
	        <span class="mui-icon iconfont icon-shouyeshouyeactive"></span><br>
	        <span class="mui-tab-label">首页</span>
	    </a>
	    <a href="front/chazhao.html" class="mui-tab-item" id="www">
	        <span class="mui-icon iconfont icon-chazhao"></span><br>
	        <span class="mui-tab-label">查找</span>
	    </a>
	    <a href="front/chexing.html" class="mui-tab-item">
	        <span class="mui-icon iconfont icon-qiche"></span><br>
	        <span class="mui-tab-label">车型</span>
	    </a>
	    <a href="front/jituan.html" class="mui-tab-item">
	        <span class="mui-icon iconfont icon-xinwen-copy"></span><br>
	        <span class="mui-tab-label">集团资讯</span>
	    </a>
	    <a href="front/wode.html" class="mui-tab-item">
	        <span class="mui-icon iconfont icon-wo"></span><br>
	        <span class="mui-tab-label">我的</span>
	    </a>
	</nav>
	
	<!--主体内容-->
	<div class="mui-content">
		<!--  轮播图组件      -->
		<div id="slider" class="mui-slider" >
		  <div id="slider_bao" class="mui-slider-group mui-slider-loop">
		    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
		    
		  </div>
		  <div id="scroll_yuan" class="mui-slider-indicator">
		    <div class="mui-indicator mui-active"></div>
		    <div class="mui-indicator"></div>
		    <div class="mui-indicator"></div>
		    <div class="mui-indicator"></div>
		  </div>
		</div>
		<!--  四张小图组件  -->
		<div class="gongneng">
			<ul id="gongneng_ulss">
				<!--<a href="#"><li>
					<img src="img/index/gn1.jpg">
					<p>汽机油</p>
				</li></a>
				<a href="#"><li>
					<img src="img/index/gn2.jpg">
					<p>机油格</p>
				</li></a>
				<a href="#"><li>
					<img src="img/index/gn3.jpg">
					<p>汽机油</p>
				</li></a>
				<a href="#"><li>
					<img src="img/index/gn4.jpg">
					<p>更多</p>
				</li></a>-->
			</ul>
		</div>
		<!--  区域滚动组件      -->
		<div class="gundong">
			<!--  模块标题       -->
			<p class="title">
				<i class="iconfont icon-ren-copy"></i>
				机师推荐机油
			</p>
			<!--  图片滚动区域       -->
			<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			    <div id="scrolls_x" class="mui-scroll">
			        <!--<a class="mui-control-item">
			            <div class="img_kuang">
			            	<img src="img/index/gun1.jpg">
			            	<p class="name">道达尔(TOTAL) 快驰90</p>
			            	<p class="jiage">平台价：<span>￥360</span></p>
			            	<p class="denglu">登陆即享优惠</p>
			            </div>
			        </a>
			        <a class="mui-control-item">
			          	<div class="img_kuang">
			            	<img src="img/index/gun1.jpg">
			            	<p class="name">道达尔(TOTAL) 快驰90</p>
			            	<p class="jiage">平台价：<span>￥360</span></p>
			            	<p class="denglu">登陆即享优惠</p>
			            </div>
			        </a>
			        <a class="mui-control-item">
			           	<div class="img_kuang">
			            	<img src="img/index/gun1.jpg">
			            	<p class="name">道达尔(TOTAL) 快驰90</p>
			            	<p class="jiage">平台价：<span>￥360</span></p>
			            	<p class="denglu">登陆即享优惠</p>
			            </div>
			        </a>
			        <a class="mui-control-item">
			           	<div class="img_kuang">
			            	<img src="img/index/gun1.jpg">
			            	<p class="name">道达尔(TOTAL) 快驰90</p>
			            	<p class="jiage">平台价：<span>￥360</span></p>
			            	<p class="denglu">登陆即享优惠</p>
			            </div>
			        </a>
			        <a class="mui-control-item">
			           	<div class="img_kuang">
			            	<img src="img/index/gun1.jpg">
			            	<p class="name">道达尔(TOTAL) 快驰90</p>
			            	<p class="jiage">平台价：<span>￥360</span></p>
			            	<p class="denglu">登陆即享优惠</p>
			            </div>
			        </a>
			        <a class="mui-control-item">
			           	<div class="img_kuang">
			            	<img src="img/index/gun1.jpg">
			            	<p class="name">道达尔(TOTAL) 快驰90</p>
			            	<p class="jiage">平台价：<span>￥360</span></p>
			            	<p class="denglu">登陆即享优惠</p>
			            </div>
			        </a>
			        <a class="mui-control-item">
			           	<div class="img_kuang">
			            	<img src="img/index/gun1.jpg">
			            	<p class="name">道达尔(TOTAL) 快驰90</p>
			            	<p class="jiage">平台价：<span>￥360</span></p>
			            	<p class="denglu">登陆即享优惠</p>
			            </div>
			        </a>
			        <a class="mui-control-item">
			           	<div class="img_kuang">
			            	<img src="img/index/gun1.jpg">
			            	<p class="name">道达尔(TOTAL) 快驰90</p>
			            	<p class="jiage">平台价：<span>￥360</span></p>
			            	<p class="denglu">登陆即享优惠</p>
			            </div>
			        </a>
			        <a class="mui-control-item">
			           	<div class="img_kuang">
			            	<img src="img/index/gun1.jpg">
			            	<p class="name">道达尔(TOTAL) 快驰90</p>
			            	<p class="jiage">平台价：<span>￥360</span></p>
			            	<p class="denglu">登陆即享优惠</p>
			            </div>
			        </a>-->
			    </div>
			</div>
		</div>
		<!--  每日热门模块      -->
		<div id="remen">
			<p class="title">
				<i class="iconfont icon-gouwudai"></i>
				每日热门
			</p>
			<!--<div class="guanggao">
				<a href="#"><img src="img/index/gg1.jpg"></a>
			</div>
			<div class="guanggao">
				<a href="#"><img src="img/index/gg2.jpg"></a>
			</div>-->
		</div>
		<!--  两个按钮模块      -->
		<div id="btn">
			<ul id="btn_us">
				<!--<a href="#">
					<li class="left">
						<i class="iconfont icon-meiyuan"></i>
						我的金融
					</li>
				</a>
				<a href="#">
					<li class="right">
						<i class="iconfont icon-huiyuan"></i>
						加入我们
					</li>
				</a>-->
			</ul>
		</div>
	</div>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    	mui.init();
    	nav_tab();
    	
    	//底部导航栏点击跳转页面函数
    	function nav_tab(){
    		var nav = document.getElementById("nav");
	    	var nav_tab = nav.getElementsByClassName("mui-tab-item");
	    	for(var i=0;i<nav_tab.length;i++){
	    		(function(x){
	    			nav_tab[x].addEventListener('tap',function(){
	    				//var this_href = this.href;
				        window.location.href = this.href;
				    });
	    		})(i)
	    	}
    	}
    	$("#sou").focus(function(){
    		window.location.href='front/index_sou.html';
    	})
    </script>
    <script>
    	var programmer1=[{
				"g_src":"img/index/banner.jpg"
			},{
				"g_src":"img/index/banner.jpg"
			},{
				"g_src":"img/index/banner.jpg"
			},{
				"g_src":"img/index/banner.jpg"
			}];
			var html1='';
			for(var i=0;i<programmer1.length;i++){
				if(i==0){
					html1 +='<div class="mui-slider-item mui-slider-item-duplicate">';
				}else if(i == programmer1.length){
					html1 +='<div class="mui-slider-item mui-slider-item-duplicate">';
				}else{
					html1 +='<div class="mui-slider-item">';
				}
				html1 +='<a href="#">';
				html1 +='<img src="' + programmer1[i].g_src + '">';
				html1 +='</a>';
				html1 +='</div>';
			};
			$("#slider_bao").html(html1);
			var programmer2=[{
				"g_src":"img/index/gn1.jpg",
				"g_word":"汽机油",
				"g_href":"front/changpinlist.html"
			},{
				"g_src":"img/index/gn2.jpg",
				"g_word":"机油格",
				"g_href":"front/changpinlist.html"
			},{
				"g_src":"img/index/gn3.jpg",
				"g_word":"汽机油",
				"g_href":"front/changpinlist.html"
			},{
				"g_src":"img/index/gn4.jpg",
				"g_word":"更多",
				"g_href":"front/changpinlist.html"
			}]
			var html2='';
			for(var i=0,len=programmer2.length;i<len;i++){
				html2 +='<a href="' + programmer2[i].g_href + '"><li>\
					<img src="'+ programmer2[i].g_src +'" />\
					<p>'+ programmer2[i].g_word +'</p>\
				</li></a>'
			}
			$("#gongneng_ulss").html(html2);
//			机师推荐机油

			$.ajax({
			    url:'http://11.nimingkeji.sinaapp.com/index.php',
			    type:'get', 
			    async:true,
			    dataType:'json', 
			    success:function(data){
			    	var $jsontip = $("#scrolls_x");
					var strHtml = "";//存储数据的变量
					$jsontip.empty();//清空内容
					$.each(data,function(infoIndex,info){
						strHtml +='<a class="mui-control-item">';
						strHtml +='<div class="img_kuang">';
						strHtml +='<img src=' + info.s_src + '>';
						strHtml +='<p class="name">' + info.s_p1 + '</p>';
						strHtml +='<p class="jiage">';
						strHtml +=info.s_p2;
						strHtml +='<span>'+ info.s_span +'</span>';
						strHtml +='</p>';
						strHtml +='<p class="denglu">'+ info.s_p3 +'</p>';
						strHtml +='</div>';
						strHtml +='</a>';
					})
					$("#scrolls_x").html(strHtml);
					$("#scrolls_x").eq(-1).addClass("as5")
			    },
			    error:function(error){
			        
			    },
			    
			})
			
			
//				$.getJSON("json/tuijianjiyou.json",function(data){
//					var $jsontip = $("#scrolls_x");
//					var strHtml = "";//存储数据的变量
//					$jsontip.empty();//清空内容
//					$.each(data,function(infoIndex,info){
//						strHtml +='<a class="mui-control-item">';
//						strHtml +='<div class="img_kuang">';
//						strHtml +='<img src=' + info.s_src + '>';
//						strHtml +='<p class="name">' + info.s_p1 + '</p>';
//						strHtml +='<p class="jiage">';
//						strHtml +=info.s_p2;
//						strHtml +='<span>'+ info.s_span +'</span>';
//						strHtml +='</p>';
//						strHtml +='<p class="denglu">'+ info.s_p3 +'</p>';
//						strHtml +='</div>';
//						strHtml +='</a>';
//					})
//					$("#scrolls_x").html(strHtml);
//					$("#scrolls_x").eq(-1).addClass("as5")
//				})
			
			var remai=[{
				"r_src":"img/index/gg1.jpg"
			},{
				"r_src":"img/index/gg2.jpg"
			}]
			var html_re='';
			for(var i=0,len=remai.length;i<len;i++){
				html_re +='<div class="guanggao">\
				<a href="#"><img src="' + remai[i].r_src + '">\
				</a>\
			</div>'
			}
			$("#remen").append(html_re);
			
			
			var btn_join=[{
				"b_word":"我的金融",
				"b_class":"iconfont icon-meiyuan"
			},{
				"b_word":"加入我们",
				"b_class":"iconfont icon-huiyuan"
			}]
			var html_join='';
			for(var i=0,len=btn_join.length;i<len;i++){
				html_join +='<a href="#">';
				html_join +='<li class="left">';
				html_join +='<i class="'+ btn_join[i].b_class +'"></i>';
				html_join +=btn_join[i].b_word;
				html_join +='</li>';
				html_join +='</a>';	
			}
			$("#btn_us").html(html_join);
    </script>
    <!--<script src="js/indexdongtai.js"></script>-->
</body>
</html>


